<template>
    <div class="step-modal">
        <Modals :largeMoadl = "'width:800px;'" :id="id" :title="title"  :errorMsg="errorMsg" :type = "'add'" :status="status">    
            <div slot="modal_content">
                <p style="line-height: 20px;position: absolute;top:10px;left: 50%;">{{add_step+'/'+all_step}}</p>
                <table> 
                    <template v-for="(item,index) in field">
                        <!-- 第2步 -->
                        <template v-if="add_step ==2&&add_step ==(index-1)">
                            <Tables 
                              style="width:790px" 
                              class="style_b" 
                              :field = 'set_field' 
                              :tableData ='tableData' 
                              :perNum='size' 
                              :totalNum="total_num"
                              :curPage ="cur_page" 
                              :pageSize='pageSize' 
                              :rankable ="true"
                              :collectField = "collect_field"                        
                              :checkedItems="params[item.name]"   
                              @changePageSize = 'changePageSize' 
                              @rankData = "rankData"                        
                              @loadData ="loadData" 
                              @sentSelectedItems="getSelectedItems" 
                              :key="index">
                                <div slot="header"></div>
                            </Tables>
                            <p v-if="tableData.length<=0" :key="index" style="text-align: left;padding:5px 0 0 20px;">暂无主机备注，请到<a @click='JumpModal()'>自定义</a>配置！</p>
                        </template> 
                        <!-- 前4步 -->
                        <template v-else-if="add_step <5">
                            <tr v-if ="add_step ==(index-1)" :key="index">
                                <td style="text-align: right;padding-right: 20px;">
                                    <label >{{item.label}}：</label>
                                </td>
                                <td style="text-align: left;width: 200px;">
                                    <inputs :type="item.type" :name="item.name" :regex="item.regex" 
                                    :emums="item.emums" :val="params[item.name]" @getVal="getVal"></inputs>
                                </td>
                                <td style="text-align: left;">
                                    <span class="remark"  v-html='item.remark'></span>                                        
                                </td>
                            </tr>
                        </template>
                        <!-- 第五步 -->
                        <template v-else-if="add_step==5">
                            <tr v-if="add_step==(index-1)" :key="index">
                            <td style="text-align: right;padding-right: 20px;">
                                <label >{{item.label}}：</label>
                            </td>
                            <td style="text-align: left;width: 200px;">
                                <inputs :type="item.type" :name="item.name" :regex="item.regex" 
                                :emums="item.emums"  :val="params[item.name]"  @getVal="getVal"></inputs>
                            </td>
                            <td style="text-align: left;">
                                <span class="remark"  v-html='item.remark'></span>                                        
                            </td>
                        </tr>
                        <tr v-if="add_step==(index-2)" :key="index">
                            <td style="text-align: right;padding-right: 20px;">
                                <label >{{item.label}}：</label>
                            </td>
                            <td style="text-align: left;width: 200px;">
                                <inputs :type="item.type" :name="item.name" :regex="item.regex" 
                                :val="params[item.name]" :emums="selectItem" @getVal="getVal"></inputs>
                            </td>
                            <td style="text-align: left;">
                                <span class="remark"  v-html='item.remark'></span>                                        
                            </td>
                        </tr>
                        </template>
                        <!-- 第6步 -->
                        <template v-else-if="add_step==6">
                            <tr v-if="add_step==(index-2)" :key="index">
                            <td style="text-align: right;padding-right: 20px;">
                                <label >{{item.label}}：</label>
                            </td>
                            <td style="text-align: left;width: 200px;">
                                <inputs :type="item.type" :name="item.name" :regex="item.regex" 
                                  :val="params[item.name]"  @getVal="getVal"></inputs>
                            </td>
                            <td style="text-align: left;">
                                <span class="remark"  v-html='item.remark'></span>                                        
                            </td>
                        </tr>
                        <tr v-if="add_step==(index-3)" :key="index">
                            <td style="text-align: right;padding-right: 20px;">
                                <label >{{item.label}}：</label>
                            </td>
                            <td style="text-align: left;width: 200px;">
                                <inputs :type="item.type" :name="item.name" :regex="item.regex" 
                                :emums="selectItem" :val="params[item.name]"  @getVal="getVal"></inputs>
                            </td>
                            <td style="text-align: left;">
                                <span class="remark"  v-html='item.remark'></span>                                        
                            </td>
                        </tr>
                        </template>
                    </template>
                </table>                     
            </div>

            <div class="modal-footer" slot="modal_footer">   
                <div v-if = "error_notice" style="color:#b63039;text-align: left; ">*{{error_msg}}</div>
                <button  class="cancel-btn button button--aylen" @click="backStep()">上一步</button>
                <button v-if="add_step===all_step" class="sure-btn button button--aylen" @click="submit()">确定</button>
                <button v-else class="sure-btn button button--aylen" @click="nextStep()">下一步</button>  
            </div>
        </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import inputs from 'components/common/inputs'
    import defendService from 'services/defendService'
    import PageData from 'libs/PageData'
    export default {
        props:{
            id:{
                type:String
            },
            errorMsg:{
                type:String
            },
            field:{
                type:Array
            },
            selectItem:{
                type:Array
            },
            addStep:{
                type:Number
            },
            status:{

            }
        },
		components:{
            Modals,
            inputs,
            Tables
        },
        data() {
            return{
                title:this.$t('safeplot.navBtn9'),
                add_step:1,
                all_step:6,
                params:{},
                format_error_arr:[],
                error_notice:false,
                error_msg:'',
                size:10,
                cur_page:1,
                pageSize: [10, 15],
                tableData:[],
                set_field: [
                    {
                        type:'checkbox',
                        style:{
                            width:'80px;'
                        }
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh1'),
                        name:'gid'
                    },
                    {
                        type:'macinput',
                        label:this.$t('safeplot.remarkTableTh3'),
                        name:'mac'
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh4'),
                        name:'description'
                    }
                ],
                collect_field:'mac',
                selectedItems:[]
            }
        },
        created() {
            this.loadData()
        },
        watch:{
            status() { 
                if (this.status=="error") {
                    this.error_msg = this.errorMsg    
                    this.error_notice = true
                }
                if (this.status === "ok") {
                    setTimeout(()=> {$('#'+this.id).modal('hide')}, 500)
                }
            },
            add_step() {
                this.$emit('sentStep', this.add_step) 
            },
            addStep() { 
                this.add_step = this.addStep
                if (this.add_step === 0) {
                    this.params = {}
                    this.add_step = 1
                    this.error_notice = false
                }           
                
            }
        },
         methods:{
            JumpModal() {           
                $('#'+this.id).modal('hide');
                $('#modal').modal('show')
            },
            submit() {
                let nextStep = this.nextStep()
                this.params.oper = 'add'
                this.params.page =  1
            if (this.format_error_arr.length <= 0 && nextStep) {
                this.$emit('addSubmit',this.params)
            }
            
            },
            checkCheckedStatus(val) {
                return String(this.edit_val).indexOf(val) >= 0
            },
            changecheckVal(name,val,event) {
                let index = this.edit_val.indexOf(val)
                if (index>=0) {
                    this.edit_val.splice(index,1)
                } else {
                    this.edit_val = [...this.edit_val,val]
                }
                this.sentval(name,this.edit_val,event)
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            testFormat(arr_index) {
                let label =  this.field[arr_index].label 
                if (this.add_step==2) {
                    if (this.selectedItems.length>0) {
                        this.params.t_ip_mac = this.selectedItems.join(",")
                        this.error_notice = false 
                        return true
                    } else {
                        this.error_notice = true           
                        this.error_msg =  this.$t('common.select') + label+ '！'   
                        return false 
                    }           
                } 
                let format_error = false
                for(let [i,ele] of this.format_error_arr.entries()) {
                    if (ele == this.field[arr_index].name) {
                        format_error = true
                    }
                }   
                let empty_test = this.params[this.field[arr_index].name]   
                if (!empty_test&&this.field[arr_index].requried) {
                    this.error_notice = true           
                    this.error_msg = label + this.$t('common.eptNotice')
                    return false                          
                } else if (format_error) {
                    this.error_notice = true
                    this.error_msg = label+ this.$t('common.errNotice')
                    return false
                } else {
                    if (this.add_step>this.all_step) {
                        this.add_step=this.all_step
                    }
                     return true
                }     
            },
            nextStep() { 
                let test = false              
                if (this.add_step === 5) {
                   let test6 = this.testFormat(6)
                   let test7 = this.testFormat(7)
                   test = test6 && test7
                } else if (this.add_step === 6) {
                   let test8 = this.testFormat(8)
                   let test9 = this.testFormat(9)   
                   test = test8 && test9
                   return test
                } else {
                    let arr_index = this.add_step + 1 
                    test = this.testFormat(arr_index)
                }

                if (test) {
                    this.add_step++
                }     
            },
            backStep() {
                if (this.add_step <= 1) {
                     this.add_step = 1
                     $("#"+this.id).modal('hide')
                     $("#trap_modal").modal('show')
                     return 
                 }
                 if (this.add_step > 1) {
                    this.add_step--             
                 }
                 
            },
            getVal(name, val, format_test) {
                 this.params[name] = val
                 if (format_test) {                  
                    this.error_notice = false
                     for(let [index, ele] of this.format_error_arr.entries()) {
                        if (ele == name) {
                            this.format_error_arr.splice(index,1)
                        }
                    }
                } else {
                    let format_error_arr = new Set([...this.format_error_arr,name])
                    this.format_error_arr = [...format_error_arr]
                }
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.loadData()
            },
            rankData (param) {
                this.order = param.order
                this.by = param.by
                this.loadData()
            },
            loadData() {
                 let params = {
                    page: this.cur_page,
                    row: this.size,
                    order:this.order,
                    by:this.by
                }
                defendService.getSafePolt(3, params)
                .then((res) => {		
					if (res.errcode === 0) {
                        this.tableData = res['3'].data.map((item)=>{
                            item.gid = String(item.gid)
                            item.style = item.filter=='1'?"color:#19BE6B":''
                            return item
                        })
						this.total_num = res['3'].count
                    }
				})
            },
         }
    }
</script>
<style scoped>
    table tr td{
        border: none;
        height: 40px;
    }
    .normal,select,textarea{
        width: 180px;  
        border: 1px solid  #e8e8e8;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 0 10px;
    }
    textarea{
        resize: vertical;
        max-height: 500px;
    }
    .normal,select{
        height: 25px;
    }
</style>
